/*
* 组件名称：顶部内容
* 开发者：scw
* 开发日期：2020-09-12
* 上次修改日期：2020-10-31
* */
import React, {memo, useEffect, useRef, useState} from 'react'
import {Col, Dropdown, Menu, Modal, Row, Button} from 'antd'
import {MenuOutlined,} from '@ant-design/icons'
import {withRouter} from 'next/router'
import NavBar from '../NavBar'
import SearchBar from "../SearchBar";
import About from "../About";
import './style.scss'
import {get} from "../../utils/requestUtil";
import ipPort from "../../common/ipPort";
import { useDispatch, useSelector } from 'react-redux'
import { LOGOUT } from "../../store/action"
import useBus from '../../hooks/useBus'

function Header(props) {
    //分类显隐
    const [classifyVisible, setClassifyVisible] = useState(false)
    //搜索显隐
    const [searchVisible, setSearchVisible] = useState(false)
    //关于显隐
    const [aboutVisible, setAboutVisible] = useState(false)
    //背景大图
    const [bgPath, setBgPath] = useState('')
    const {typeList, onSearchReload } = props
    const Info = useSelector(state => state.userInfo)
    const header = useRef()
    const headerMain = useRef()
    const dispatch = useDispatch()
    const bus = useBus()

    console.log('a')

    const indexClick = () => {
        props.router.push(`/`)
    };

    async function getBgImage() {
        try {
            let res = await get(ipPort + '/api/default/getBgImage', {});
            if (res.success && res.path) {
                setBgPath(res.path)
            } else {
                setBgPath('/icon/default_bg.jpg')
            }
        } catch (e) {
            setBgPath('/icon/default_bg.jpg')
        }
    }


    const scrollListener = () => {
        const headerHeight = header.current.offsetHeight
        const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        if (scrollTop > headerHeight - 50) {
            headerMain.current.classList.add('scrollStyle')
        } else {
            headerMain.current.classList.remove('scrollStyle')

        }
    }

    const clickListener = () => {
        setClassifyVisible(false)
        setSearchVisible(false)
    }
    useEffect(() => {
        getBgImage()
        headerMain.current = document.querySelector('.HeaderMain')
        header.current = document.getElementById('Header')
        document.addEventListener('scroll', scrollListener)
        document.addEventListener('click', clickListener)
        return () => {
            document.removeEventListener('scroll', scrollListener)
            document.removeEventListener('click', clickListener)
        }
    }, [])

    const MenuItemClick = (type, e) => {
        e.nativeEvent.stopImmediatePropagation()
        switch (type) {
            case 'classify':
                setClassifyVisible(true)
                break
            case 'search':
                setSearchVisible(true)
                break
            case 'about':
                setAboutVisible(true)
                break
            default :
                break
        }
    }

    function handleMenuClick(key) {
        switch (key) {
            case 'login':
                bus.emit('openSignModal', '登录')
                break
            case 'register':
                //bus.emit('openSignModal', '注册')
                break
            case 'logout':
                dispatch(LOGOUT({ userId: Info.userId }))
                break
            case 'writeArticle':
                window.open("http://blog-edit.ztime.tech/", "_blank");
                break
            default:
                break
        }
    }

    const classifyMenu = (
        <Menu>
            <Menu.Item>
                <a className={'classifyText'} href={'https://blog-edit.ztime.tech'} >写文章</a>
            </Menu.Item>
            <Menu.Item>
                <a className={'classifyText'}  onClick={MenuItemClick.bind(Header, 'classify')}>文章分类</a>
            </Menu.Item>
            <Menu.Item>
                <a className={'classifyText'} onClick={MenuItemClick.bind(Header, 'search')}>文章搜索</a>
            </Menu.Item>
            <Menu.Item>
                <a className={'classifyText'}  onClick={MenuItemClick.bind(Header, 'about')}>关于博主</a>
            </Menu.Item>
            <Menu.Item>
                <a className={'classifyText'} onClick={handleMenuClick.bind(Header, Info.username ? 'logout' : 'login')}> 
                    {Info.username ? '注销':'登录' }
                </a>
            </Menu.Item>
        </Menu>
    )

    const menu = (
        <Menu style={{backgroundColor: 'rgba(0, 0, 0, 0.25)'}}>
            <Menu.Item key="writeArticle" onClick={handleMenuClick.bind(Header, 'writeArticle')} className={'write-article'} style={{color:'#ffffff',fontSize: '1em'}}>
                <svg t="1626359683309" className={"write-article-icon"} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1346" width="20" height="20"><path d="M841 822c-0.7 0.6-69 55.2-207.2-3.8-163.5-69.7-288.8-1.7-294 1.2-12.2 6.8-16.6 22.2-9.8 34.4 6.8 12.2 22.2 16.6 34.4 9.8 1.1-0.6 108.6-58.9 249.5 1.2 54.7 23.3 101 31.2 138.8 31.2 77 0 118.1-32.9 120.6-35 10.8-8.9 12.3-24.9 3.3-35.6-8.9-10.8-24.8-12.3-35.6-3.4zM529.3 488.7c-9.9-9.9-25.9-9.9-35.8 0L370.9 611.3c7.5-51.4 63.7-153.6 171.2-261.1 64-64 132-115.9 191.5-146.1 54.9-27.9 89.6-30.1 99.8-20 24.9 24.9-28.7 153.8-166.1 291.3-51.9 51.9-106.4 95.8-157.7 127.1-11.9 7.3-15.7 22.9-8.4 34.8 7.3 11.9 22.9 15.7 34.8 8.4 54.7-33.4 112.4-79.9 167.1-134.6 67.7-67.7 122.9-140.3 155.5-204.4 47.1-92.7 31.8-137.3 10.7-158.5-21.1-21.1-65.8-36.4-158.5 10.7-64.1 32.6-136.7 87.8-204.4 155.5-119 119-211.6 266.9-180.3 341.8L142 840.2c-9.9 9.9-9.9 25.9 0 35.8 4.9 4.9 11.4 7.4 17.9 7.4s13-2.5 17.9-7.4l351.5-351.5c9.9-9.9 9.9-25.9 0-35.8z" p-id="1347" fill="#7db8ee"></path></svg>写文章
            </Menu.Item>
        </Menu>
    )


    return <div className={'Header'} id={'Header'} /**style={{backgroundImage: `url(${ipPort + bgPath})`}} */> 
    {/*//     return <div className={'Header'} id={'Header'} >*/}
        <Row justify={'space-around'} className={'HeaderMain'}>
            <Col xs={13}>
                <strong className={'name'} onClick={indexClick.bind(Header)}>{Info.username || '子亥'}</strong>
                <span className={'type'}>&nbsp;个人技术博客</span>
            </Col>
             <Col xs={0} md={7} className={"headerRight"}>
                {Info.sendword}
            </Col>
            <Col xs={2} className={"headerRight"}>
                <Dropdown overlay={menu}>
                    <Button style={{color:'#ffffff', fontSize: '1em', backgroundColor: 'transparent', border: '0px'}}>
                        创作中心
                    </Button>
                </Dropdown>
            </Col>
            <Col xs={7} md={0} className={"headerRight"}>
                <Dropdown overlay={classifyMenu} trigger={['click']}>
                    <MenuOutlined style={{fontSize: '18px'}}/>
                </Dropdown>
            </Col>

            {/*搜索框 文章分类*/}
            <Col xs={24} md={0}>
                {classifyVisible && <NavBar path={props.router.asPath} typeList={typeList}/>}
                {searchVisible && <SearchBar onSearchReload={onSearchReload}/>}
                <Modal
                    title="关于博主"
                    visible={aboutVisible}
                    footer={null}
                    destroyOnClose
                    wrapClassName={'aboutModal'}
                    onCancel={() => {
                        setAboutVisible(false)
                    }}
                >
                    <About />
                </Modal>

            </Col>
        </Row>
    </div>
}

export default memo(withRouter(Header))
